<template>
  <div class="stroke_item">
    <div class="left" :style="{ width: leftWidth }">
      {{ title }}
    </div>
    <div
      class="right  text_shadow_yellow"
      v-if="num == '0.0%'"
      :style="{ width: rightWidth }"
    >
      {{ num }}
    </div>
    <div
      class="right danger"
      v-else-if="num.indexOf('-') == -1"
      :style="{ width: rightWidth }"
    >
      {{ num }}
      <img
        src="@/assets/images/echarts/jiang.png"
        alt=""
        v-if="unit != ''"
        style="transform: rotate(180deg)"
      />
    </div>
    <div class="right" v-else :style="{ width: rightWidth }">
      {{ num }}
      <img
        src="@/assets/images/echarts/sheng.png"
        alt=""
        v-if="unit != ''"
        style="transform: rotate(180deg)"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String | Number,
      default: "",
    },
    number: {
      type: String | Number,
      default: 0,
    },
    unit: {
      type: String | Number,
      default: "",
    },
    leftWidth: {
      type: String | Number,
      default: "35%",
    },
    rightWidth: {
      type: String | Number,
      default: "65%",
    },
  },
  watch: {
    number: "formatNum",
  },
  created() {
    this.formatNum(11111);
  },
  data() {
    return {
      num: "",
    };
  },
  methods: {
    formatNum(str) {
      //   var newStr = "";
      //   var count = 0;
      //   // if (this.number.indexOf("-") ) {
      //     if (str.indexOf(".") == -1) {
      //       for (var i = str.length - 1; i >= 0; i--) {
      //         if (count % 3 == 0 && count != 0) {
      //           newStr = str.charAt(i) + "," + newStr;
      //         } else {
      //           newStr = str.charAt(i) + newStr;
      //         }
      //         count++;
      //       }
      //       this.num = str = newStr; //自动补小数点后两位
      //     } else {
      //       for (var i = str.indexOf(".") - 1; i >= 0; i--) {
      //         if (count % 3 == 0 && count != 0) {
      //           newStr = str.charAt(i) + "," + newStr;
      //         } else {
      //           newStr = str.charAt(i) + newStr; //逐个字符相接起来
      //         }
      //         count++;
      //       }
      //       this.num = str =
      //         newStr + (str + "00").substr((str + "00").indexOf("."), 3);
      //     }
      //   // } else {
      //   //   this.num = this.number;
      // }
      this.num = this.$formatNum(this.number).replace(",", "");
    },
  },
};
</script>

<style lang="scss" scoped>
.stroke_item {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  background: rgba(36, 104, 160, 0.5);
  margin-bottom: 2.5%;
  .left {
    width: 35%;
    height: 100%;
    background: url("../../../assets/images/echarts/ju.png");
    background-size: 100% 100%;
    font-size: 13px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: center;
    color: #ffffff;
    line-height: 35px;
    letter-spacing: 1px;
  }
  .right {
    width: 65%;
    height: 100%;
    font-size: 21px;
    font-family: Adobe Heiti Std, Adobe Heiti Std-R;
    font-weight: R;
    text-align: center;
    color: #3bffe6;
    text-shadow: 1px 0px 3px #3bffe6;
    line-height: 35px;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
  }
  .danger {
    color: rgba(255, 74, 74, 1);
    text-shadow: 1px 0px 3px rgba(255, 74, 74, 1);
  }
  .text_shadow_yellow {
    color: yellow;
    text-shadow: 1px 0px 3px yellow;
  }
  img {
    width: 13px;
    height: 15px;
    margin-top: 7px;
  }
}
</style>
